<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-20 18:03:46
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-19 22:32:32
 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边部门数据-->
      <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
        <div style="padding: 1px;background-color:#f6f6f6;height:100%;position: fixed;">
          <el-input
            v-model="deptName"
            clearable
            size="small"
            placeholder="输入部门名称搜索"
            prefix-icon="el-icon-search"
            class="filter-item"
            style="margin-top: 5px;width: 96%;margin-left: 2%;"
            @input="getDeptDatas"
          />
        </div>
        <el-tree
          :data="deptDatas"
          :props="defaultProps"
          :expand-on-click-node="false"
          default-expand-all
          style="margin-top:55px;background-color:#f6f6f6"
          @node-click="handleNodeClick"
        />
      </el-col>
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
        <!--表格渲染-->
        <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
          <el-table-column prop="name" label="用户名" />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avatar" class="el-avatar">
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" />
          <!-- <el-table-column prop="email" label="邮箱" /> -->
          <!-- <el-table-column label="角色" align="center">
            <template slot-scope="scope">
              <span v-for="(role, index) in scope.row.roles" :key="index">
                <el-tag type="gray"> {{ role.name }} </el-tag> 
              </span> &nbsp;
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="是否企业号">
            <template slot-scope="scope">
              <span>{{ scope.row.is_enterprise ? '是':'否' }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{ +scope.row.enabled === 1 ? '离职' : '在职' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="注册日期" />
          <el-table-column label="操作" align="center" width="180px">
            <template slot-scope="scope">
              <edit
                v-if="checkPermission(['ADMIN','USER_ALL','USER_EDIT'])"
                :data="scope.row"
                :roles="roles"
                :sup_this="sup_this"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'

export default {
  name: 'Staff',
  components: { Treeselect },
  mixins: [initData],
  data() {
    return {
      deptName: '',
      deptDatas: [],
      defaultProps: { children: 'children', label: 'label' },
      loading: false,
    }
  },
  computed: {
    
  },
  created() {
    // this.$nextTick(() => {
    //   this.init()
    // })
  },
  mounted() {
    this.getDeptDatas()
  },
  methods: {
    checkPermission,
    getDeptDatas() {
      this.$api.enterprise.department
        .getDeptDatas(this.deptName)
        .then(res => {
          this.deptDatas = res.data
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    handleNodeClick(node) {
      // console.log(node)
      this.$api.enterprise.department
        .getDeptUserList(node.id)
        .then(res => {
          this.data = res.data
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    }
  }
}
</script>

<style scoped>
</style>
